<template>
    <div class="child">
        <h3>子组件2</h3>
        <h4>电脑:{{ computer }}</h4>
        <h4>哥哥给的玩具：{{ toy }}</h4>
    </div>
</template>

<script setup lang="ts" name="Child2">
import emitter from "@/utils/emitter";
import { onUnmounted } from "vue";
import { ref } from "vue";
let computer = ref("联想")
let toy = ref("")
emitter.on("send-toy", (value: any) => {
    console.log(value, "value");
    toy.value = value
})

//组件卸载的时候解绑send-toy
onUnmounted(() => {
    emitter.off("send-toy")
})

</script>

<style  scoped>
.child {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
}
</style>